<script>
import analysisVideo from "@/practice/pages/index/components/analysisVideo.vue";

export default {
  name: "analysis",
  components: { analysisVideo },
  props: {
    currentQuestion: Object,
  },
  data() {
    return {
      isVip: false,
    };
  },
  created() {
    this.isVip = this.root.isVip;
  },
  inject: ["root"],
};
</script>

<template>
  <view class="analysis">
    <!--					正确答案-->
    <view
      ><text>正确答案：</text>
      <text>{{ currentQuestion.answer }}</text>
      <!--					用户回答-->
      <view
        >你的作答：<text
          :class="
            currentQuestion.userAnswer === currentQuestion.answer
              ? 'doRight'
              : 'doWrong'
          "
        >
          <text>{{
            currentQuestion.userAnswer ? currentQuestion.userAnswer : "未作答"
          }}</text>
        </text></view
      >
      <!--					会员才能查看题目解析-->
      <template v-if="isVip">
        <view
          v-html="currentQuestion.analysis"
          v-if="currentQuestion.analysis"
        ></view>
        <view style="margin-top: 20rpx" v-if="currentQuestion.videoUrl">
          <analysisVideo
            :video-file-url="currentQuestion.videoUrl"
          ></analysisVideo>
        </view>
      </template>
      <!--					非会员展示查看解析按钮引导用户去开通会员-->
      <view v-else style="display: flex; justify-content: flex-end">
        <view
          style="
            padding: 0 30rpx;
            height: 80rpx;
            border-radius: 40rpx;
            display: flex;
            align-items: center;
            background: var(--theme-color);
          "
          @click="() => root.checkIsVip()"
          >查看解析</view
        >
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.analysis {
	font-size: calc(32rpx * var(--font-size-rate));
	line-height: 2;
	.doRight {
		color: #1b9b69;
		font-weight: bold;
	}
	.doWrong {
		color: #f00;
		font-weight: bold;
	}
}
</style>
